/**
 * 作者: dailc
 * 时间: 2016-11-16
 * 描述:  博客 时间线页面
 */
(function(win) {
	var timeline = {
		/**
		 * @description 监听滑动
		 */
		listenersScroll: function() {
			var eventMarks = document.querySelectorAll('.timeline-mark');
			//激活某一个mark dom
			var currPoint = function(dom) {
				for(var i = 0, len = eventMarks.length; i < len; i++) {
					eventMarks[i].parentNode.classList.remove('curr');
				}
				dom.parentNode.classList.add('curr');
//				if(dom.parentNode.classList.contains('closed')){
//					dom.parentNode.classList.remove('closed');
//					app.animate.animate(dom.parentNode.querySelector('.event-content'), {
//						display: 'show'
//					});
//				}
			};
			//监听滑动
			document.addEventListener('scroll', function() {
				//console.log("y:" + getScrollTop());
				var currTop = app.dimensions.getScrollTop();
				if(eventMarks) {
					var yArray = [];
					for(var i = 0, len = eventMarks.length; i < len; i++) {
						yArray[i] = app.offset.getTop(eventMarks[i]);
					}
					//分析哪一个更近
					var curr = 0;
					for(var i = 0, len = yArray.length; i < len; i++) {
						if(i >= 1) {
							if(yArray[i] > currTop && yArray[i - 1] < currTop) {
								curr = i;
							}
						}
					}
					currPoint(eventMarks[curr]);
				}
				//console.log("firsty:" + getdomY(document.querySelector('.timeline-mark')));
			});
			
		},
		/**
		 * @description 初始化book
		 */
		initAllItems: function() {
			var self = this;
			//绑定每一个的点击,显示和隐藏
			var eventThings = document.querySelectorAll('.event-title,.timeline-mark');
			app.event.bindEvent(eventThings, function(e) {
				var parent = this.parentNode;
				if(parent) {
					if(parent.classList.contains('closed')) {
						//已经关闭
						parent.classList.remove('closed');
						app.animate.animate(parent.querySelector('.event-content'), {
							display: 'show'
						});
					} else {
						parent.classList.add('closed');
						app.animate.animate(parent.querySelector('.event-content'), {
							display: 'hide'
						});
					}
				};
			});
			//年份的点击与隐藏
			var majorMarks = document.querySelectorAll('.timeline-marker-major');
			if(majorMarks) {
				app.event.bindEvent(majorMarks, function(el) {
					var eventContent = this.parentNode.querySelectorAll('.timeline-event');
					if(eventContent) {
						var isAllClosed = true;
						Array.prototype.forEach.call(eventContent, function(el) {
							if(el.classList.contains('closed')) {
								isAllClosed = false;

							}
						});
						Array.prototype.forEach.call(eventContent, function(el) {
							if(isAllClosed) {
								if(!el.classList.contains('closed')) {
									el.classList.add('closed');
									app.animate.animate(el.querySelector('.event-content'), {
										display: 'hide'
									});
								}

							} else {
								if(el.classList.contains('closed')) {
									el.classList.remove('closed');
									app.animate.animate(el.querySelector('.event-content'), {
										display: 'show'
									});
								}
							}
						});
					}
				});
			}
			//初始化
			var eventContent = document.querySelectorAll('.timeline-event');
			if(eventContent) {
				for(var i = 0, len = eventContent.length; i < len; i++) {
					if(eventContent[i].classList.contains('closed')) {
						app.animate.animate(eventContent[i].querySelector('.event-content'), {
							display: 'hide'
						});
					}
				}
			}
			//监听滑动
			self.listenersScroll();

		},
		/**
		 * @description 创建时间轴
		 */
		createTimeLine: function(){
			var data = [{
                "time":"现今",
                "event":[{
                    "year":"2023",
                    "date":"4.6",
                    "title":"人生新格言",
                    "content":[
                        "遇事多辱骂别人，少责备自己。少问自己为什么，多问别人凭什么。众所周知，没有道德就不会被道德绑架",
                    ],
                }]
            }];
            /*[{
                "time":"现今",
                "event":[{
                    "year":"2020",
                    "date":"9.1",
                    "title":"准备开启新的旅程",
                    "content":[
                        "合约最后一年，终于可以自由地准备调动",
                        "虽然被雪藏没有课可以上，但是自己还是申请开一个《语言学入门》的选修课",
                        "希望Dream School还能要我",
                    ],
                }]
            }, {
                "time":"2019",
                "event":[{
                    "year":"2019",
                    "date":"1.6",
                    "title":"调动失败",
                    "content":[
                        "去找人事校长谈了两次，还是没能说通",
                        "不过广华暂时也还没有建好，现在这边混到合同到期也不是不可以"
                    ],
                }]
            }, {
		"time":"2018",
		"event":[{
			"year":"2018",
			"date":"1.8",
			"title":"李笑笑出生",
			"content":[
				"人生进入新的阶段",
				"中年妇女你好"
			],
			//图片数组
			"media":[
				"/asserts/images/timeline/img_2018_1.jpg",
				"/asserts/images/timeline/img_2018_2.jpg",
				"/asserts/images/timeline/img_2018_3.jpg"
				]
           }]
	},{
		"time":"2017",
		"event":[{
			"year":"2017",
			"date":"5.24",
			"title":"妈蛋怀孕了",
			//数组,每一个item都是p标签里的内容
			"content":[
				"如题，我的事业规划被全盘打乱了",
				"垃圾领导，毁我青春",
				"算了算了顺其自然"
			]
				}]
			},{
				"time":"2016",
				"event":[{
					"year":"2016",
					"date":"7.11",
					"title":"New start，new attitude",
					//数组,每一个item都是p标签里的内容
					"content":[
						"吃着奶条唱着歌，突然听说要当班主任",
						"em，要经受住社会的考验和毒打"
					]
				},{
					"year":"2016",
					"date":"06.30",
					"title":"终于毕业了",
					//数组,每一个item都是p标签里的内容
					"content":[
						"匆匆忙忙，跌跌撞撞",
						"从一个校园，挪腾到另一个校园"
					]
				}]
			}]; */
			var createTimeLineHtml = function(timeLineArray){
				var html = '';
				for(var i=0,len = timeLineArray.length;i<len;i++){
					var tmp = timeLineArray[i];
					var mtClass = (i===0)?'':'mt80';
					html += '<div class="timeline-date '+mtClass+'">';
					html += '<div class="timeline-marker-major">';
					html += '<div class="mask"></div>';
					html += '<div class="major-content"><div thisyear="" class="timeblock">'
					html += tmp.time;
					html += '</div></div>';	
					html += '<div class="clock"><span>';
					html += tmp.time;
					html += '</span></div>';
					html += '</div>';
					//开始创建事件
					html += createEventArray(tmp.event);
					html += '</div>';
				}
				return html;
			};
			var createEventArray = function(eventArray){
				var html = '';
				for(var i=0,len = eventArray.length;i<len;i++){
					var tmp = eventArray[i];
					var mtClass = (i===0)?'mt80':'mt40';
					html += '<div class="timeline-minor '+mtClass+' clearfix ">';
					html += '<h3>'+tmp.date+'<span>'+tmp.year+'</span></h3>';
					html += '<div class="timeline-event  ">';
					html += '<div class="timeline-mark"></div>';
					html += '<h3 class="event-title">'+tmp.title+'</h3>';
					html += '<div class="event-content ">';
					if(tmp.media){
						html += '<div class="media">';
						for(var j=0,len2=tmp.media.length;j<len2;j++){
							html += '<img src="'+tmp.media[j]+'" />';
						}
						html += '</div>';
					}
					if(tmp.content){	
						for(var j=0,len2=tmp.content.length;j<len2;j++){
							html += '<p>'+tmp.content[j]+'</p>';
						}
					}								
					html += '</div>';
					html += '</div>';
					html += '</div>';
				}
				return html;
			};
			
			var html = createTimeLineHtml(data);
			document.querySelector('.timeline-container').innerHTML = html;
		},
		/**
		 * @description book页面初始化
		 */
		init: function() {
			var self = this;
			self.createTimeLine();
			self.initAllItems();
		}
	};

	//初始化
	timeline.init();
})(window);